<template>
  <div class="filter-container">
    <nut-tabs v-model="selected" title-scroll title-gutter="10" type="smile">
      <nut-tab-pane v-for="item in tabList" :title="item.name"></nut-tab-pane>
    </nut-tabs>
  </div>
</template>
<script setup>
import { ref, watch, toRefs } from "vue";
const props = defineProps({
  tabList: Array,
});
const emit = defineEmits(["onChange"]);
const { tabList } = toRefs(props);
const selected = ref(0);

//监听当前的tabs选中 变化出发自定一函数 子传父组件数据
watch(selected, (index) => {
  emit("onChange", tabList.value[index]);
});
</script>
<style lang="less">
.filter-container {
  .nut-tabs__content {
    display: none !important;
  }

  .nut-tabs__list {
    background-color: #fff;
    // background: linear-gradient(
    //   to right,
    //   #d8ecfe,
    //   #d2e8fe,
    //   #cce5fe,
    //   #cde5ff,
    //   #c6e2ff,
    //   #c2dfff,
    //   #c1dffe
    // );
  }

  .nut-tabs__titles {
    // background: #ffffff !important;

    .nut-tabs__titles-item {
      .nut-tabs__titles-item__smile {
        margin-top: 10px !important;
      }

      .nut-tabs__titles-item__text {
        color: #858a99;
        font-size: 24px;
      }

      .nut-tabs__titles-item__line {
        // background: linear-gradient(to right, #5232B7, #7237BC, #FFFFFF) !important;
      }
    }

    .nut-tabs__titles-item.active {
      .nut-tabs__titles-item__smile {
        display: block;
        margin-top: 10px !important;
      }

      .nut-tabs__titles-item__text {
        color: #15181d;
      }
    }
  }
}
</style>
